<template>
	<scroll-view class="scroll-view viewport" scroll-y>
		<OrderInfo :orderDetail="orderDetail"></OrderInfo>
		<view class="card">
			<PayMethod :payList="payList" v-model:paymentMethod="paymentMethod"></PayMethod>
		</view>
		<view style="height: 200rpx;">

		</view>
	</scroll-view>
	<view class="toolbar">
		<!-- <text  @tap="onChangeSelectedAll" class="all" :class="{ checked: isSelectedAll }">全选</text> -->
		<text class="amount">{{orderDetail.currency}}{{orderDetail.totalAmount}} </text>
		<view class="button-grounp">
			<view class="button payment-button" @click="Pay">立即支付</view>
		</view>
	</view>
	<view class="toolbar-height"></view>
</template>
<script setup lang="ts">
	import OrderInfo from './components/OrderInfo.vue';
	import PayMethod from './components/PayMethod.vue';
	import { ref } from 'vue'
	import { onLoad } from '@dcloudio/uni-app'
	import { getOrderDetail, getPayMethods,postPayOrder } from '../../api/order'
	import type { orderDes } from '@/types'
	const query = defineProps<{
		orderNo ?: number | string
	}>()
	const orderDetail = ref<orderDes>(null)
	const payList = ref([])
	const paymentMethod = ref(1)
	onLoad(() => {
		getMemberOrderByIdData()
	})
	const getMemberOrderByIdData = async () => {
		const res = await getOrderDetail(query.orderNo)
		console.log(res)
		orderDetail.value = res.data
		const { data } = await getPayMethods()
		payList.value = data
	}
	
	const Pay = async()=>{
		let clientType = 3 // 3:小程序 2:h5
		let params = {
			orderNo:query.orderNo,
			paymentMethod:paymentMethod.value,
			clientType:clientType
		}
		
		// 判断平台类型
		const platform = uni.getSystemInfoSync().platform
		if(platform == 'h5'){
			// H5环境
			params.clientType = 2
		} else {
			// 小程序环境，获取登录code
			try {
				// 使用Promise方式调用uni.login
				await new Promise((resolve, reject) => {
					uni.login({
						success: (res) => {
							if (res.code) {
								params.code = res.code
								console.log('获取登录code成功:', res.code)
								resolve(res)
							} else {
								console.error('获取登录code失败:', res)
								reject(new Error('获取登录code失败'))
							}
						},
						fail: (err) => {
							console.error('uni.login调用失败:', err)
							reject(err)
						}
					})
				})
			} catch(e) {
				console.error('获取登录code失败', e)
			}
		}
		
		const res = await postPayOrder(params)
		console.log(res)
		if(res.success){
			if(res.data.payStatus==3){
				uni.navigateTo({
					url:`/pagesOrder/detail/index?orderNo=${res.data.orderNo}`
				})
			}
			else if(res.data.jsApiParams || res.data.paymentUrl){
				// 判断平台类型
				//const platform = uni.getSystemInfoSync().platform
				
				// H5平台
				if(platform === 'h5' && res.data.paymentUrl) {
					// H5平台使用uni.navigateTo跳转到支付页面
					// 微信支付不能直接跳转，需要通过页面中的按钮触发
					uni.navigateTo({
						url: `/pagesOrder/payment/components/h5-payment?payUrl=${encodeURIComponent(res.data.paymentUrl)}`
					})
				} 
				// 小程序平台
				else if(res.data.jsApiParams) {
					// 小程序使用requestPayment
					uni.requestPayment({
						...res.data.jsApiParams,
						success: (res) => {
							uni.showToast({
								icon:'none',
								title:'支付成功'
							})
							uni.navigateTo({
								url:`/pagesOrder/detail/index?orderNo=${query.orderNo}`
							})
						},
						fail: (res) => {
							uni.showToast({
								icon:'none',
								title:'支付失败'
							})
						}
					})
				}
			}
		}else{
			uni.showToast({
				icon:'none',
				title:res.message
			})
		}
	}
</script>

<style lang="scss">
	page {
		display: flex;
		flex-direction: column;
		height: 100%;
		overflow: hidden;
	}

	.viewport {
		background-color: #f7f8fa;

	}

	.overview {
		line-height: 1;
		padding: 50rpx 0;
		color: #fff;
		background-color: $uni-color-primary;

		.status {
			font-size: 36rpx;
			font-weight: 500;
			text-align: center;
		}

		.status::before {
			display: block;
			font-size: 110rpx;
			margin-bottom: 20rpx;
		}

		.buttons {
			height: 60rpx;
			line-height: 60rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			margin-top: 60rpx;
		}

		.button {
			text-align: center;
			margin: 0 10rpx;
			font-size: 28rpx;
			color: #fff;

			&:first-child {
				width: 200rpx;
				border-radius: 64rpx;
				border: 1rpx solid #fff;
			}
		}
	}
</style>